<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/list.css">
    <title>Document</title>
</head>

<body>
    <div class="header">
        <h1>小米商品列表管理系统</h1>
        <div class="mask"></div>
        <!-- 添加 -->
        <div class="add-pannel">
            <h2>添加商品</h2>
            <p>商品标题： <input type="text" class="title"></p>
            <p>商品图片： <input type="text" class="imgUrl" value="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/f941386e72f745b02e8921b6c8055cd6.jpg?thumb=1&w=40&h=40&f=webp&q=90" readonly></p>
            <p>是否热销商品:
                <input type="radio" name="hot" checked="checked" value="1" class="hot">是<input type="radio" name="hot" value="0">不是</p>
            <p><button class="add-btn">添加商品</button></p>
            <div class="close">
                &times;
            </div>
        </div>
    </div>
    <div class="container">
        <!-- 工具栏 -->
        <div class="toolbar">
            <form>
                <input type="text" class="search-box" placeholder="请输入商品标题"> <button class="search-btn">搜索</button>
            </form>
            <p><button class="add">添加</button></p>
        </div>

        <!-- 产品列表 -->
        <div class="list">
            <table>
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>标题</th>
                        <th>图片地址</th>
                        <th>hot</th>
                        <th>编辑</th>
                        <th>删除</th>
                    </tr>
                </thead>
                <tbody class="cont">
                    <!-- <tr>
                        <td>Id</td>
                        <td>title</td>
                        <td><img src="https" alt=""></td>
                        <td><button data-id=1>编辑</button></td>
                        <td><button data-id=1>删除</button></td>
                    </tr> -->
                </tbody>
            </table>
        </div>

    </div>
    <script src="./js/util.js"></script>
    <script src="./js/miList.js"></script>
</body>

</html>